<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> Customize Form elements </title>
<style type="text/css">
<!--
body{margin:50px;font: 12px/1.6 arial;color: #eee;background: #000;}
.checkbox, .radio {height: 21px;padding: 0 0 0 25px;background: url(checkbox.gif) no-repeat 0 0;cursor: default;}
.checkbox input, .radio input {display: none;}
.radio {background: url(radio.gif) no-repeat 0 0;}
.selected {background-position: 0 -52px;}
-->
</style>
<script type="text/javascript">
<!--
var Input = {
	initialize: function() {
		if(document.getElementsByTagName("form")) {
	     var divs = document.getElementsByTagName("div");
	    for(var i = 0; i < divs.length; i++) {
	       if(divs[i].className.match("checkbox") || divs[i].className.match("radio")) {
	         divs[i].onmousedown = Input.effect;
	        divs[i].onmouseup = Input.handle;
	         window.onmouseup = Input.clear;
	       }
	      }
	   }
	  },

	 effect: function() {
	  if(this.className == "checkbox" || this.className == "radio") {
	    this.style.backgroundPosition = "0 -26px";
	    } else {
	    this.style.backgroundPosition = "0 -79px";
	   }
	 },

  handle: function() {
   selector = this.getElementsByTagName("input")[0];
   if(this.className == "checkbox") {
    selector.checked = true;
     this.className = "checkbox selected";
    this.style.backgroundPosition = "0 -52px";
   } else if(this.className == "checkbox selected") {
    selector.checked = false;
     this.className = "checkbox";
     this.style.backgroundPosition = "0 0";
    } else {
     selector.checked = true;
      this.className = "radio selected";
    this.style.backgroundPosition = "0 -52px";
     inputs = document.getElementsByTagName("input");
     for(i = 0; i < inputs.length; i++) {
       if(inputs[i].getAttribute("name") == selector.getAttribute("name")) {
        if(inputs[i] != selector) {
           inputs[i].parentNode.className = "radio";
           inputs[i].parentNode.style.backgroundPosition = "0 0";
         }
        }
      }
   }
  },

 clear: function() {
    divs = document.getElementsByTagName("div");
   for(var i = 0; i < divs.length; i++) {
     if(divs[i].className == "checkbox" || divs[i].className == "radio") {
        divs[i].style.backgroundPosition = "0 0";
     } else if(divs[i].className == "checkbox selected" || divs[i].className == "radio selected") {
      divs[i].style.backgroundPosition = "0 -52px";
      }
   }
 }
}
window.onload = Input.initialize;
//-->
</script>
</head>

<body>
<div id="w">
<strong>before</strong>
	<p><input type="checkbox" /><label for="#">Beijing</label><br />
	<input type="checkbox" checked="checked" /><label for="#">Shanghai</label><br />
	<input type="radio" name="t" /><label for="#">Male</label><br />
	<input type="radio" name="t" checked="checked" /><label for="#">Female</label></p>
<strong>after</strong>
	<div class="checkbox"><input type="checkbox" name="checkbox[]" /><label for="#">Beijing</label></div>
	<div class="checkbox selected"><input type="checkbox" name="checkbox[]" checked="checked" /><label for="#">Shanghai</label></div>
	<div class="radio"><input type="radio" name="radio" /><label for="#">Male</label> </div>
	<div class="radio selected"><input type="radio" name="radio" checked="checked" /><label for="#">Female</label></div>
</div>
</body>
</html>